import { Col, Row } from 'antd';
import 'dayjs/locale/zh-cn';
import React, { useState } from 'react';
import TabAccount from './components/account/TabAccount';
import TreeOrganization from './components/organization/TreeOrganization';
import { PageContainer } from '@ant-design/pro-layout';

export default (): React.ReactNode => {
  /**
   * 树形列表选择数据
   */
  const [dataTreeSelect, setTreeDataSelectState] = useState<any>();
  /**

   * 是否 显示 Tab
   */
  const [visibleTab, setVisibleTabState] = useState<boolean>(false);

  return (
    <PageContainer
      breadcrumb={{
        items: [],
      }}
    >
      <Row gutter={[16, 16]}>
        <Col span={7}>
          <TreeOrganization
            onSelect={(info) => {
              setVisibleTabState(info.selected);
              setTreeDataSelectState(info);
            }}
            onRefurbish={() => {}}
          />
        </Col>
        <Col span={17}>
          <TabAccount key="tab_account" organization={dataTreeSelect} onSaveSuccess={() => {}} />
        </Col>
      </Row>
    </PageContainer>
  );
};
